<script lang="ts" setup>
//
import { formatMoney } from '@/utils/index'
import { GoodsCart } from '@/service/goods/cart/cart.d'
import type { GoodsDiscountVO } from '@/service/goods/coupon/coupon.d'
import { useActiveCartStore } from '@/store/activeCart'

const emit = defineEmits(['submitOrder'])
const props = defineProps<{
  modelValue: boolean
  cartList: GoodsCart[]
  discountList: GoodsDiscountVO[]
  modelType: 'cart' | 'categorize' | 'pay'
  bottom: string
}>()
const activeCartStore = useActiveCartStore()
onMounted(() => {
  activeCartStore.setCart(props.cartList.filter((item) => item.selected === 1))
})

const navigateToSettle = () => {
  if (activeCartStore.selectedCount === 0) {
    uni.showToast({ title: '请选择商品', icon: 'none' })
    return
  }
  uni.navigateTo({ url: '/pages/order/orderConfirm' })
}
// 总金额
const totalPrice = computed<number>(() => {
  return props.discountList.reduce((acc: number, item: GoodsDiscountVO) => {
    // 防御性类型校验
    const quantity = Number(item.quantity) || 0
    const originalPrice = Number(item.originalPrice) || 0
    const discount = Number(item.discountAmount) || 0

    // 精确计算（放大100倍处理小数）
    const base = Math.round(originalPrice * quantity * 100)
    const discountVal = Math.round(discount * 100)
    return acc + (base - discountVal) / 100
  }, 0)
})

// 原价
const marketTotalPrice = computed<number>(() => {
  return props.discountList.reduce((acc: number, cur: GoodsDiscountVO) => {
    const price = cur.marketPrice // 优先取市场价
    return acc + price * cur.quantity
  }, 0)
})

const goMyCart = () => {
  uni.switchTab({ url: '/pages/cart/index' })
}
// 提交订单事件

const SubmitEventOrder = () => {
  emit('submitOrder')
}
</script>
<template>
  <view class="footer-bar safe-area" v-show="modelValue" :style="'bottom:' + bottom">
    <view class="footer-bar-box">
      <view class="show-cart"></view>
      <view class="footer-inner">
        <view class="footer-icon">
          <view class="flex flex-col justify-center text-center footer-icon-item footer-icon-kefu">
            <view class="iconfont tabbar-kefu" style="font-size: 50rpx; color: aliceblue"></view>
            <!-- <text style="font-size: 24rpx">客服</text> -->
          </view>
          <view
            v-if="modelType === 'categorize'"
            class="flex flex-col justify-center text-center footer-icon-item"
            @click="goMyCart"
          >
            <view class="cart-bar">
              <view class="cart-tips">
                {{ activeCartStore.selectedCount }}
              </view>
              <view
                class="iconfont tabbar-gouwuche"
                style="font-size: 50rpx; color: aliceblue"
              ></view>
            </view>
          </view>
          <view class="price-bar">
            <view>
              <view class="total-price">
                <text class="total-price-tip">预估</text>
                <text class="sale-price">{{ formatMoney(totalPrice) }}</text>
                <text class="macket-total-price">{{ formatMoney(marketTotalPrice) }}</text>
              </view>
              <view class="discount-bar">
                <text>已经优惠</text>
                <text class="discount-amount">
                  {{ formatMoney(marketTotalPrice - totalPrice) }}
                </text>
              </view>
            </view>
            <view
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                font-size: 24rpx;
                color: #999;
              "
            >
              <text>快去选购您的美酒吧</text>
            </view>
          </view>
        </view>

        <view
          v-if="modelType !== 'pay'"
          class="fution-item now-buy"
          :class="activeCartStore.selectedCount > 0 ? '' : 'now-buy-disabled'"
        >
          <view @click="navigateToSettle">立即结算</view>
          <view v-if="modelType === 'cart'" class="buy-count">
            (共 {{ activeCartStore.selectedCount }} 件)
          </view>
        </view>
        <view
          v-else
          class="fution-item now-buy"
          :class="
            activeCartStore.selectedCount > 0 ||
            Object.keys(activeCartStore.temporaryCart).length !== 0
              ? ''
              : 'now-buy-disabled'
          "
        >
          <view @click="SubmitEventOrder">
            提交订单
            <!-- {{ Object.keys(activeCartStore.temporaryCart).length === 0 }} -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
.footer-bar {
  position: fixed;
  right: 0;
  left: 36rpx;
  z-index: 99;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 680rpx;
  height: 100rpx;

  .footer-bar-box {
    position: relative;
    width: 100%;
    height: 100%;

    .footer-inner {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 11;
      display: flex;
      justify-content: space-between;
      width: 680rpx;
      height: 100rpx;
      overflow: hidden;
      border-radius: 60rpx;
    }
  }
  .footer-icon {
    display: flex;
    justify-content: flex-start;
    width: 500rpx;
    height: 100%;
    color: #fff;
    background: linear-gradient(-90deg, #494949, #181c1b);
    .footer-icon-item {
      position: relative;
      width: 90rpx;
      .cart-bar {
        position: relative;
        .cart-tips {
          position: absolute;
          top: -26rpx;
          right: 0;
          z-index: 12;
          width: 30rpx;
          height: 30rpx;
          font-size: 24rpx;
          color: #fff;
          background-color: $uni-bg-themes;
          border: 6rpx solid #fff;
          border-radius: 50%;
        }
      }
    }
    .price-bar {
      margin-left: 10rpx;
      .total-price {
        font-size: 28rpx;
        color: #fff;
        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
        .total-price-tip {
          font-size: 24rpx;
        }
        .sale-price {
          font-size: 32rpx;
          &::before {
            font-size: 24rpx;
            content: '￥';
          }
        }
        .macket-total-price {
          font-size: 24rpx;
          color: #999;
          text-decoration: line-through;
          &::before {
            font-size: 20rpx;
            content: '￥';
          }
        }
      }
      .discount-bar {
        font-size: 24rpx;
        color: #999;
        .discount-amount {
          margin-left: 10rpx;
          &::before {
            content: '￥';
          }
        }
      }
    }

    .footer-icon-kefu {
      position: relative;
      &::after {
        position: absolute;
        top: 20rpx;
        right: 0;
        z-index: 9999;
        width: 4rpx;
        height: 60rpx;
        content: '';
        background-color: #494949;
      }
    }
  }
  .fution-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 100%;
    color: #fff;
    .buy-count {
      font-size: 20rpx;
    }
  }

  .now-buy {
    font-size: 28rpx;
    background-color: $uni-bg-themes;
  }
  .now-buy-disabled {
    background-color: #fc8c8c;
  }
  .btn-group {
    display: flex;
    flex: 1;
    margin-left: 20rpx;

    .btn {
      flex: 1;
      height: 80rpx;
      font-size: 32rpx;
      font-weight: 500;
      border-radius: 50rpx;
      transition: all 0.2s;

      &::after {
        border: none;
      }
    }

    .cart-btn {
      color: #ff5c5c;
      background: linear-gradient(90deg, #fff3f3, #ffeaea);

      &:active {
        opacity: 0.9;
      }
    }

    .buy-btn {
      color: white;
      background: linear-gradient(90deg, #ff6969, #ff4040);

      &:active {
        opacity: 0.9;
      }
    }
  }
}

// 适配全面屏底部安全区域
.safe-area {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
</style>
